import React, { PureComponent } from 'react'

export default function WithMouseListener(Comp) {
  return class WithMouseComp extends PureComponent{
    divRef = React.createRef()
  state = {
    x:50,
    y:50
  }
  hanldeMouseMove = e=>{
    console.log(e)
    console.log(e.pageX,e.pageY)
    console.log(this.divRef)
    const {left ,top} = this.divRef.current.getBoundingClientRect()
    const x = e.pageX - left
    const y = e.pageY - top
    console.log(left,top)
    this.setState({
      x,y
    })

  } 
  render(){
    return  <div ref={this.divRef} className='point' onMouseMove={
      this.hanldeMouseMove
    }>
   
      <Comp {...this.state} />
   
    </div>
    }
  }
   
}
